<script setup>
import { ref } from 'vue'
const pageSize4 = ref(100)
const currentPage4 = ref(4)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// tab栏
const activeName = ref('first')
// tab栏切换
const handleClick=(tab) => {
  console.log(tab,111);
}
// 分页
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
// 表格数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const tableData1 = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Geles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189,Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189,  Angeles',
  },
]
</script>
    <template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="未读" name="first"> 
    <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="序号" width="180" />
    <el-table-column prop="name" label="发信人" width="180" />
    <el-table-column prop="address" label="内容" />
    <el-table-column prop="address" label="下次跟进时间" sortable  />
    <el-table-column prop="address" label="发信人" />
  </el-table>
</el-tab-pane>
    <el-tab-pane label="已读" name="second">
      <el-table :data="tableData1" stripe style="width: 100%">
        <el-table-column prop="date" label="序号" width="180" />
    <el-table-column prop="name" label="发信人" width="180" />
    <el-table-column prop="address" label="内容" />
    <el-table-column prop="address" label="下次跟进时间" sortable  />
    <el-table-column prop="address" label="发信人" />
  </el-table>
    </el-tab-pane>
  </el-tabs>
 <el-row type="flex" justify="center" style="margin-top:30px">
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
 </el-row>
</template>
<style scoped>

</style>
